<template>
  <div>
    <my-table :data="list">
      <!-- 大标题 -->
      <template #title>
        <h3>品牌管理</h3>
      </template>
      <!-- id列 -->
      <template #id="scoped">
        <h4 v-color="'skyblue'">{{scoped.id}}</h4>
      </template>
      <!-- name列 -->
      <template #name2="scoped">
        <p>{{scoped.name3}}</p>
      </template>
      <!-- price列 -->
      <template #price="scoped">
        <p v-color="scoped.price>100?'':true">{{scoped.price}}</p>
      </template>
      <!-- time列 -->
      <template #time="scoped">
        <h6>{{scoped.time}}</h6>
      </template>
      <!-- 按钮列 -->
      <template #btn>
        <a href="javascript:;">删除</a>&nbsp;&nbsp;&nbsp;
        <a href="javascript:;">添加</a>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  components: { MyTable },
  data () {
    return {
      list: [
        { id: 100, name: '外套', price: 199, time: new Date('2010-08-12') },
        { id: 101, name: '裤子', price: 34, time: new Date('2013-09-01') },
        { id: 102, name: '鞋', price: 25.4, time: new Date('2018-11-22') },
        { id: 103, name: '头发', price: 19900, time: new Date('2020-12-12') }
      ]
    }
  },

  created () {

  },
  // 自定义属性
  directives: {
    color: {
      inserted (el, binding) {
        el.style.color = binding.value || 'red'
      }
    }
  },
  methods: {

  }
}
</script>

<style scoped lang='less'>

</style>
